/* ==========================================================================
   CSS Form Framework

    A simple but effective framework for laying out form elements.
    See http://codepen.io/brian-at-osprey/pen/xVOdRy for a demo.
   ========================================================================== */

form.stacked-input {
}

   form.stacked-input label,
   form.stacked-input label + input:not([type=radio]):not([type=checkbox]),
   form.stacked-input label + select,
   form.stacked-input label + textarea,
   .input-group.stacked label,
   .input-group.stacked label + input:not([type=radio]):not([type=checkbox]),
   .input-group.stacked label + select,
   .input-group.stacked label + textarea {
      display: block;
   }

form.aligned-input {
}

   form.aligned-input .input-group,
   .input-group.aligned {
      display: block;
      display: table-row;
   }

   form.aligned-input .submit-group {
      display: block;
   }

   form.aligned-input .input-group label,
   form.aligned-input .input-group input:not([type=radio]):not([type=checkbox]),
   form.aligned-input .input-group select,
   form.aligned-input .input-group textarea,
   .input-group.aligned label,
   .input-group.aligned input:not([type=radio]):not([type=checkbox]),
   .input-group.aligned select,
   .input-group.aligned textarea {
      display: inline; /* Fallback */
      display: table-cell; /* What we really want */
      vertical-align: top;
   }

   form.aligned-input .input-group input[type=radio],
   form.aligned-input .input-group input[type=checkbox],
   .input-group.aligned input[type=radio],
   .input-group.aligned input[type=checkbox] {
      display: inline;
   }

   form.aligned-input label,
   .input-group.aligned label {
      text-align: right;
      padding-right: 1rem;
   }

   form.aligned-input .submit-group input {
      display: inline;
      display: inline-block;
   }

form.inline-input {
}

   form.inline-input .input-group,
   form.inline-input .submit-group,
   .input-group.inline,
   .submit-group.inline {
      display: inline-block;
   }

.input-group:after {
   content: "";
   display: block;
   margin-bottom: 1rem;
}

form.inline-input .input-group:after,
.input-group.inline:after,
form.inline-input .submit-group:after,
.submit-group.inline:after {
   content: "";
   display: inline-block;
   margin-right: 1rem;
}

.input-group.inline + :not(.inline):not(.aligned):before {
   content: "";
   display: block;
   margin-top: 1rem;
}

.input-group.inline + .input-group.aligned > * {
   margin-top: 1rem;
}

input[type="submit"],
input[type="reset"] {
   margin: 0 0.25rem;
}

form.submit-left .submit-group {
   float: left;
}

form.submit-center .submit-group {
   width: 90%;
   text-align: center;
   white-space: nowrap;
   padding: 0;
   margin: 0 auto;
}

form.submit-right .submit-group {
   float: right;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
   label,
   label + input:not([type="checkbox"],[type="radio"]),
   label + select,
   label + textarea,
   .input-group,
   .submit-group {
      display: block;
   }

   form.aligned-input {
      display: block;
   }

      form.aligned-input .input-group,
      form.aligned-input .submit-group,
      .input-group.aligned {
         display: block;
      }

         form.aligned-input label,
         form.aligned-input label + input:not([type="checkbox"]):not([type="radio"]),
         form.aligned-input label + select,
         form.aligned-input label + textarea,
         .input-group.aligned label,
         .input-group.aligned label + input:not([type="checkbox"]):not([type="radio"]),
         .input-group.aligned label + select,
         .input-group.aligned label + textarea {
            display: block;
         }

   form.inline-input .input-group,
   form.inline-input .submit-group,
   .input-group.inline,
   submit-group.inline {
      display: block;
   }

   form.aligned-input label,
   .input-group.aligned label {
      text-align: initial;
   }

   form.submit-center .submit-group,
   form.submit-right .submit-group {
      float: left;
   }

   .input-group.inline + .input-group.aligned > * {
      margin-top: 0;
   }

   form.inline-input .input-group:after,
   .input-group.inline:after,
   form.inline-input .submit-group:after,
   .submit-group.inline:after {
      content: "";
      display: block;
      margin-right: 0;
   }

   .input-group.inline + :not(.inline):not(.aligned):before {
      content: "";
      display: block;
      margin-top: 0;
   }
}